<!--这个就是商品的详情页-->
<template>
  <div id="details">
    <childdetail class="detail-nav" @clicknavbar="clicknavbar" ref="detailcount"></childdetail>
    <betterscroll @hiddimg="hiddimg" class="content" ref="betscroll">
      <detailimg :detailswiper="detailswiper"></detailimg>
      <detaiinfo :goods="goods"></detaiinfo>
      <detailshop :shop="shop"></detailshop>
      <childshow :detail-info="detailInfo" @imageLoad="imageLoad"></childshow>
      <detailparams ref="inparams" :param-info="paramInfo"></detailparams>
      <detailcomment ref="incomment" :comment-info="commentInfo"></detailcomment>
      <goodslist ref="ingoods" :goodslist="recommends"></goodslist>
    </betterscroll>
    <backtop v-show="arimg" @backtopclick="backtopclick"></backtop>
    <detailnvbar @addToCart="addToCart" class="nvbar"></detailnvbar>
  </div>
</template>

<script>
import childdetail from "views/detail/childdetail/childdetail";
import { detailrequires, Goods, Shop, recommand } from "network/detail";
import detailimg from "views/detail/childdetail/detailimg";
import detaiinfo from "views/detail/childdetail/detaliinfo";
import detailshop from "views/detail/childdetail/detailshop";
import betterscroll from "components/common/betterscroll/betterscroll";
import childshow from "views/detail/childdetail/childshow";
import detailparams from "views/detail/childdetail/detailparams";
import detailcomment from "views/detail/childdetail/detailcomment";
import detailnvbar from "views/detail/childdetail/detailnvbar";
import goodslist from "components/conent/goods/goodslist";
import { itemListenerMixin,showupimg } from "common/mixin";
import backtop from "components/conent/backtop/backtop";
import {mapActions} from "vuex"
export default {
  name: "App",
  data() {
    return {
      iid: "",
      index: 0,
      detailswiper: [],
      goods: {}, //保存商品信息
      res: "",
      shop: {}, //保存商家信息
      detailInfo: {}, //商品详细信息展示
      paramInfo: {}, //获取商品的参数
      commentInfo: {}, //获取用户的评论
      recommends: [], //获取商品的推荐
      temtopy: [], //这个保存详情等y的地址的
      pricationy: 0, //保存y的值
      countindex: 0 //保存循环遍历出来的值
    };
  },
  mixins: [itemListenerMixin,showupimg],
  components: {
    childdetail,
    detailimg,
    detaiinfo,
    detailshop,
    betterscroll,
    childshow,
    detailparams,
    detailcomment,
    goodslist,detailnvbar
  },
  created() {
    this.iid = this.$route.params.iid;
    console.log(this.$route.params.iid);
    //请求 参数，详情，商品
    detailrequires(this.iid).then(res => {
      this.res = res.data.result;
      console.log(res);
      this.detailswiper = res.data.result.itemInfo.topImages;

      console.log("我进来的次数++");
      //获取商品信息
      this.goods = new Goods(
        this.res.itemInfo,
        this.res.columns,
        this.res.shopInfo.services
      );
      //获取商家信息
      this.shop = new Shop(this.res.shopInfo);

      //商品详细信息展示
      //获取商品详细信息
      this.detailInfo = this.res.detailInfo;

      //获取参数信息展示
      this.paramInfo = this.res.itemParams;
      console.log(this.paramInfo);

      //获取评论信息  判断有没有评论有的话才传递
      if (this.res.rate.cRate !== 0) {
        this.commentInfo = this.res.rate.list[0];
      }
    });
    //请求 推荐数据
    recommand().then(result => {
      console.log(result);
      this.recommends = result.data.data.list;
      console.log(this.recommends);
    });
  },
  mounted() {
    //获取到这个监听的事件imageLoad
    // console.log(4444444444444444);
    
  },
  methods: {
    ...mapActions(["addCart"]),
    imageLoad() {
      //这个就是获取到混入的属性进行调用
      // console.log("小李子")
      //在图片加载完成之后把这里面的值加到数组里面去
      this.debounces();
      this.temtopy.push(0);
      this.temtopy.push(this.$refs.inparams.$el.offsetTop);
      this.temtopy.push(this.$refs.incomment.$el.offsetTop);
      this.temtopy.push(this.$refs.ingoods.$el.offsetTop);
    },
    clicknavbar(index) {
      this.index = index;
      console.log(this.index);
      //然后点击的时候进行相对应的跳转，注意一定要在图片加载完成之后进行操作
      this.$refs.betscroll.batterscrollcli(0, -this.temtopy[this.index]);
    },
    hiddimg(prication) {
      //获取到y的数字
      //console.log("我是第二")
      this.pricationy = prication.y;
      //console.log(this.temtopy);
      for (let i = 0; i < this.temtopy.length; i++) {
        //console.log(this.temtopy[i]);
        if (
          this.countindex != i &&
          -this.pricationy > this.temtopy[i] &&
          -this.pricationy < this.temtopy[i + 1]
        ) {
          this.countindex = i;
          this.$refs.detailcount.count = this.countindex;
        }
        if (
          this.countindex != 3 &&
          -this.pricationy > this.temtopy[this.temtopy.length - 1]
        ) {
          this.countindex = 3;
          this.$refs.detailcount.count = 3;
        }

      }
      this.$refs.betscroll.count = 3;
            this.arimg = prication.y < -1000;
    },addToCart(){//点击加入购物车
        // console.log("加入购物车");
         const product = {};
      product.image = this.detailswiper[0];//获取商品的第一张图片
      product.title = this.goods.title; //获取商品的标题
      product.desc = this.goods.desc;//获取商品的详细信息
      product.price = this.goods.realPrice;//获取商品的价格
      product.iid = this.iid;//获取商品的id
      product.count = 1;
      //console.log(product)
      //在vuex中如果要增加新的变量那么就需要 使用musations进行增加，否则就不能实现响应式
      // this.$store.dispatch('addCart',product).then(()=>{
      //   console.log("wonengfanhu")
      // })
      this.addCart(product).then((res)=>{
        console.log(res)
      })
    }
  }
};
</script>

<style>
#details {
  height: 100vh;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.content {
  /* position: absolute; */
  /* top: 44px; */
  /* bottom: 60px; */
  height: calc(100%-44px-35px);
  background-color: #fff;
}
.detail-nav {
  position: relative;
  z-index: 9;
  background: #fff;
}
</style>
